<template>
	<view class="userbank" v-if="isshow">
		
		<view class="userinfo">
			<view class="infolist">
				<input type="text" v-model="names" placeholder="收件人姓名" />
			</view>
			<view class="infolist">
				<input type="text" v-model="phone" placeholder="手机号码" />
			</view>
			<view class="infolist infopicker">
				<picker :range="province" :value="index1" @change="getcity1">
					<view>{{province[index1]}}</view>
				</picker>
				<picker :range="city" :value="index2" @change="getcity2">
					<view>{{city[index2]}}</view>
				</picker>
				<picker :range="area" :value="index3" @change="getcity3">
					<view>{{area[index3]}}</view>
				</picker>
			</view>
			<view class="infolist addresstext">
				<input type="text" v-model="address" placeholder="街道小区门牌等详细地址" />
			</view>
		</view>
		<view class="bankbtn" @click="sub">
			保存并使用
		</view>
	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				names: '',
				phone:'',
				address:'',
				list:[],
				city:[],
				area:[],
				province:[],
				isshow:true,
				index1: 0,
				index2: 0,
				index3: 0,
				p_id:'',
				c_id:'', 
				a_id:'',
			}
		},
		onLoad() {
			
			this.CityList()
			
		},
		methods: {
			CityList(){
				CityList().then(res=>{	
					console.log(res)
					this.list = res
					// this.province = res;
					
					// this.city = this.province[0]
					// this.area = this.city[0]
					res.forEach((item,index)=>{
						this.province[index] = item.name
					})
					this.p_id = res[0].id
					res[0].children.forEach((item,index)=>{
						this.city[index] = item.name
					})
					this.c_id = res[0].children[0].id
					res[0].children[0].children.forEach((item,index)=>{
						this.area[index] = item.name
					})
					this.a_id = res[0].children[0].children[0].id
					console.log(this.a_id)
					
					
					
					this.isshow = true
				})
			},
			getcity1(e) {
				this.index1 = e.detail.value
				this.list[this.index1].children.forEach((item,index)=>{
					this.city[index] = item.name
				})
				this.p_id = this.list[this.index1].id
				
			},
			getcity2(e) {
				this.index2 = e.detail.value
				this.list[this.index1].children[this.index2].children.forEach((item,index)=>{
					this.area[index] = item.name
				})
				this.c_id = this.list[this.index1].children[this.index2].id
			},
			getcity3(e) {
				this.index3 = e.detail.value
				this.a_id = this.list[this.index1].children[this.index2].children[this.index3].id
			},
			sub(){
				address_add({name:this.names,phone:this.phone,address:this.address,province:this.p_id,city:this.c_id,area:this.a_id}).then(res=>{
					if(res.status == 1){
						uni.showToast({
							title:res.message
						})
						setTimeout(()=>{
							uni.navigateBack()
						},1000)
					}else{
						uni.showToast({
							title:res.message
						})
					}
				})
			}
		}
	}
</script>

<style>
	.infopicker {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-top: 3%;
	}

	.infopicker picker {
		background: #fff;
		width: 32%;
		text-align: center;
		padding: 3% 0;
	}

	.userbank .tips {
		background: #fff3dc;
		color: #f23030;
		padding: 2% 5%;
		font-size: 12px;
	}

	.userinfo {
		width: 90%;
		margin: 50rpx auto;
	}

	.infolist input {
		background: #fff;
		padding: 3% 5%;
		margin-top: 20rpx;
		border-radius: 5px;
	}

	.bankbtn {
		background-color: #FF5E53;
		color: #fff;
		margin: 30rpx auto;
		width: 40%;
		text-align: center;
		padding: 3% 0;
		border-radius: 5px;
	}

	.addresstext input {
		padding-bottom: 80rpx;
	}
</style>
